<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部</title>

</head>
<body>
    <div id="yun9">
        <hello></hello>
    </div>

    <div id="app">
        <hi></hi>
    </div>

<!--局部组件在定义的时候根本不知道自己是一个组件，只知道是个对象
局部组件在使用时需要注册到对应的主vue组件中
-->
<script src="../node_modules/vue/dist/vue.js"></script>
<script>

   let haha =  {
        template: `
       <div>
            <button @click="ageAdd">我是haha组件内部的按钮，我的名字是:{{name}},我的年龄：{{age}}</button>
        </div>
       `,
        data() {
           return{
            name: "张学友",
            age: 50
           }
        },
        methods: {
            ageAdd() {
                this.age++;
            }
        },
        watch:{
           age(newVal,oldVal){
               alert("age发生改变了，新的值为:"+newVal+" 旧的值为："+oldVal);
           }
        }
    }

   let yun9 = new Vue({
       el: "#yun9",
       components:{
          hello:haha //组件的重命名
       }
   });



   let app = new Vue({
       el: "#app",
       components:{
           hi:haha
       }
   });
</script>
</body>
</html>